<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
      .tick line{
        stroke:#ccc
      }
    </style>
  </head>
  <body>

    <svg>
        <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#660"/>
          <stop offset="1" stop-color="#ff0" />
        </linearGradient>
    </svg>

    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const data = [
        { date: "2010", avg: 545 ,max:705,min:502},
        { date: "2011", avg: 512 ,max:693,min:463},
        { date: "2012", avg: 493 ,max:685,min:455},
        { date: "2013", avg: 566 ,max:703,min:521},
        { date: "2014", avg: 589 ,max:712,min:543},
        { date: "2015", avg: 601 ,max:724,min:552},
        { date: "2016", avg: 575 ,max:701,min:498},
        { date: "2017", avg: 523 ,max:698,min:473},
        { date: "2018", avg: 476 ,max:685,min:448},
        { date: "2019", avg: 503 ,max:708,min:452},
        { date: "2020", avg: 625 ,max:721,min:556},
        { date: "2021", avg: 584 ,max:710,min:524},
        { date: "2022", avg: 539 ,max:704,min:488},
        { date: "2023", avg: 561 ,max:709,min:515},
      ];


      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      
      const x = d3.scaleTime()
        .domain(d3.extent(data,d=>new Date(d.date)))
        .range([0,600])
        .nice()


      const y = d3.scaleLinear()
        .domain([d3.min(data,d=>d.min)-50 , d3.max(data,d=>d.max)+50])  
        .range([400,0])

      const g = svg.append('g').attr('transform','translate(100,100)')

      


      const yAxis = d3.axisLeft(y)
      g.append('g')
        .call(yAxis)  


      const area = d3.area()
          .x(d=>x(new Date(d.date)))
          .y0(d=>y(d.min))
          .y1(d=>y(d.max))
          .curve(d3.curveNatural)

      g.append('path')
        .attr('d',area(data))
        .attr('stroke','#666')
        .attr('fill','url(#g1)')
          
      const xAxis = d3.axisBottom(x)
        .tickSize(-400)
      g.append('g').attr('transform','translate(0,400)')
        .call(xAxis)

      g.append('g')
        .selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx',d=>x(new Date(d.date)))        
        .attr('cy',d=>y(d.min))        
        .attr('r',3)
        .attr('fill','steelblue');   
      g.append('g')
        .selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx',d=>x(new Date(d.date)))        
        .attr('cy',d=>y(d.max))        
        .attr('r',3)
        .attr('fill','steelblue');          
        
       
    </script>
  </body>
</html>
